<template>
	<view>
		<van-dialog id="van-dialog"></van-dialog>
		<!-- 展示头像和用户名区域 -->
		<view class="my-top-area">
			<view class="img-name">
				<image src="/static/logo.png" mode=""></image>
				<text>{{ uname }}</text>
			</view>
		</view>
		<!-- 信息展示面板 -->
		<view class="panel-box">
			<view class="panel-top-box">
				<view @click="gotoPage('favmerchants', 'index', 0)"><van-icon size="20px" name="star-o" /><text>商品收藏</text></view>
				<view @click="gotoPage('favmerchants', 'index', 1)"><van-icon size="20px" name="shop-o" /><text>店铺关注</text></view>
				<view @click="gotoPage('browsehistory')"><van-icon size="20px" name="clock-o" /><text>浏览历史</text></view>
			</view>
			<view class="panel-bottom-box">
				<view @click="gotoPage('orderslist', 'index', 0)"><van-icon size="20px" name="clock-o" /><text>我的订单</text></view>
				<view @click="gotoPage('orderslist', 'index', 1)"><van-icon size="20px" name="send-gift-o" /><text>待收货</text></view>
				<view @click="gotoPage('orderslist', 'index', 2)"><van-icon size="20px" name="comment-circle-o" /><text>待评价</text></view>
				<view @click="gotoPage('orderslist', 'index', 3)"><van-icon size="20px" name="passed" /><text>已完成</text></view>
			</view>
		</view>
		<!-- 按钮组件区域 -->
		<view class="buttons">
			<van-cell title="我的个人资料" @click="gotoPage('userdetail')" is-link />
			<van-cell title="我的收货地址" @click="gotoPage('addresslist')" is-link />
			<van-cell title="关于买买买APP" is-link />
			<van-cell title="退出登录" @click="exitLogin" is-link />
		</view>
	</view>
</template>

<script>
	import Dialog from '../../wxcomponents/vant-weapp/dialog/dialog.js'
	export default {
		onLoad() {
			this.getUserBasicInfo()
		},
		onShow() {
			this.getUserBasicInfo()
		},
		data() {
			return {
				// 用户的唯一标识
				uid: '',
				// 用户名
				uname: '',
				// 用户输入表单的登录名
				username: '',
				// 用户输入表单登录密码
				password: ''
			}
		},
		methods: {
			// 从本地存储中获取用户的基本信息
			getUserBasicInfo() {
				this.uid = uni.getStorageSync('uid')
				if(!uni.getStorageSync('uid')) return Dialog.alert({
						message: '您还未登录，请前往登录',
					}).then(() => {
						uni.navigateTo({
							url: '/subpages/userlogin/userlogin'
						})
					});
				this.uname = uni.getStorageSync('uname')
			},
			// 当收货地址按钮被点击时 跳转至地址管理页面
			gotoPage(pagename, varname, value) {
				let url = `/subpages/${ pagename }/${ pagename }`
				if(varname && value) {
					url = `/subpages/${ pagename }/${ pagename }?${ varname }=${ value }`
				}
				uni.navigateTo({
					url
				})
			},
			// 退出登录
			exitLogin() {
				let that = this
				wx.showModal({
				  title: '提示',
				  content: '是否确认退出登录',
				  success (res) {
				    if (res.confirm) {
				     uni.removeStorageSync('uid')
						 uni.removeStorageSync('uname')
						 uni.removeStorageSync('address')
						 uni.removeStorageSync('history')
						 uni.removeStorageSync('shistory')
						 that.resetInfo()
						 uni.navigateTo({
						 	url: '/subpages/userlogin/userlogin'
						 })
				    }
				  }
				})
			},
			// 重置信息
			resetInfo() {
				this.uid = ''
				this.uname = ''
				this.username = ''
				this.password = ''
			}
		}
	}
</script>

<style>
	page {
		background-color: #f2f2f2;
	}
	
	.login-area {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.van-button {
		width: 100%;
		margin: 140rpx auto;
	}
	
	.panel-box {
		position: relative;
		top: -50rpx;
		background-color: #fff;
		margin: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.my-top-area {
		background-color: #f00;
	}
	
	.my-top-area,
	.panel-top-box {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}
	
	.panel-top-box {
		padding: 40rpx;
		background-color: white;
		justify-content: space-around;
		height: auto;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}
	
	.panel-top-box view {
		vertical-align: top;
	}
	
	.img-name,
	.panel-bottom-box > view {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}
	
	.panel-bottom-box > view text {
		font-size: 11px;
	}
	
	.panel-bottom-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
	}
	
	.panel-bottom-box > view {
		width: 25%;

	}
 	
	.img-name image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
		margin-bottom: 20rpx;
	}
	
	.img-name text {
		color: white;
	}
</style>
